<template>
    <div class = "menu-item" @click = "change">
        <div class = "menu-item-split">
            <div class = "menu-item-icon" :style="{ backgroundImage: `url(${rq.image(data.icon ?? '')})` }"></div>
        </div>
        <div class = "menu-item-split">{{ data.label }}</div>
    </div>
</template>

<script setup lang = "ts">
import type { MenuType } from '@/assets/js/portal/MenuType';
import { ref } from 'vue'
import { Require } from '@/assets/js/utils/Require'

const props = defineProps<{
    data: MenuType,
    parentId: string
}>()
const rq = new Require()

const emit = defineEmits<{
    (e: 'on-click', menuItem: MenuType, parentId: string): void
}>()

const change = () => {
    emit('on-click', props.data, props.parentId)
}
</script>

<style lang = "less" scoped>
.menu-item {
    width: 80px;
    height: 80px;
    margin: 10px;
    display: inline-flex;
    flex-direction: column;
    cursor: pointer;
    border-radius: 4px;
    &-split {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
    }
    &-icon {
        width: 24px;
        height: 24px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    &&:hover {
        background-color: rgb(238, 243, 254);
    }
}
</style>